<template>
  <div class="loginContainer">
    <el-form
      ref="forgotForm"
      label-position="top"
      :model="forgotForm"
      :rules="rules"
      class="login-form"
      label-width="100%"
    >
      <h3 class="title">找回密码</h3>
      <el-steps
        :active="active"
        finish-status="success"
        style="margin-bottom: 25px"
      >
        <el-step title="验证方式"></el-step>
        <el-step title="验证"></el-step>
        <el-step title="重置密码"></el-step>
      </el-steps>
      <template v-if="active == 0">
        <!-- 要找回密码的用户名以及验证方式 -->
        <el-form-item label="用户名" prop="username">
          <el-input
            v-model="forgotForm.username"
            placeholder="请输入用户名"
          ></el-input>
        </el-form-item>
        <el-form-item label="验证方式">
          <el-select
            v-model="validWay"
            placeholder="请选择验证方式"
            style="width: 100%"
          >
            <el-option label="安全问题验证" value="1"></el-option>
            <!-- <el-option label="短信验证码" value="2" :disabled="true"></el-option>
            <el-option label="身份证号" value="3" :disabled="true"></el-option> -->
          </el-select>
        </el-form-item>
      </template>
      <template v-else-if="active == 1">
        <!-- 验证是否本人操作 -->
        <template v-if="validWay == '1'">
          <!-- :rules="{ required: true, message: '请输入问题的答案', trigger: 'blur'}" -->
          <el-form-item
            v-for="(val, index) in forgotForm.qa"
            :key="index"
            :prop="`qa[${index}].answer`"
            :rules="{
              required: true,
              validator: (rule, value, callback) => {
                checkAnswer(rule, value, callback, val.questionId)
              },
              trigger: 'blur',
            }"
          >
            <span>{{ val.question }}</span>
            <el-input
              v-model="val.answer"
              placeholder="请输入问题的答案"
            ></el-input>
          </el-form-item>
        </template>
      </template>
      <template v-else>
        <!-- 修改密码 -->
        <el-form-item label="新密码" prop="password">
          <el-input
            type="password"
            auto-complete="off"
            show-password
            placeholder="请输入新密码"
            v-model.trim="forgotForm.password"
          >
            <svg-icon
              slot="prefix"
              icon-class="password"
              class="el-input__icon input-icon"
            />
          </el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="rePassword">
          <el-input
            type="password"
            auto-complete="off"
            show-password
            placeholder="请确认密码"
            v-model.trim="forgotForm.rePassword"
          >
            <svg-icon
              slot="prefix"
              icon-class="password"
              class="el-input__icon input-icon"
            />
          </el-input>
        </el-form-item>
      </template>
      <el-button type="primary" style="width: 100%" v-if="active == 2" @click="resetPassword">
        修改密码
      </el-button>
      <el-button type="primary" style="width: 100%" @click="next" v-else>
        下一步
      </el-button>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'Forgot',
  data() {
    const equalToPassword = (rule, value, callback) => {
      if (this.forgotForm.password !== value) {
        callback(new Error("两次输入的密码不一致"));
      } else {
        callback();
      }
    };
    return {
      active: 0,
      validWay: '1',
      forgotForm: {
        username: undefined,
        qa: [],
        password: undefined,
        rePassword: undefined,
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
        ],
        password: [
          { required: true, message: "新密码不能为空", trigger: "blur" },
          { min: 6, max: 18, message: "密码长度在 6 到 18 个字符", trigger: "blur" }
        ],
        rePassword: [
          { required: true, message: "确认密码不能为空", trigger: "blur" },
          { required: true, validator: equalToPassword, trigger: "blur" }
        ]
      },
    }
  },
  created() {},
  methods: {
    // 重置密码
    resetPassword() {
      let param = {...this.forgotForm};
      delete param.qa;
      delete param.rePassword;
      this.putRequest('/portal/user/forgot', param).then(resp => {
        this.$router.replace({ path: '/login'})
      });
    },
    // 校验答案
    checkAnswer(rule, value, callback, questionId) {
      if (!value) {
        callback(new Error('请输入问题的答案'))
      } else {
        this.getRequest(
          `/portal/user/check/${this.forgotForm.username}/${questionId}/${value}`
        ).then((resp) => {
          if (resp.status == 22) {
            callback(new Error(resp.msg))
          } else {
            callback()
          }
        })
      }
    },
    next() {
      if (this.active == 0) {
        // 要找回密码的用户名以及验证方式
        this.checkUsername()
      } else if (this.active == 1) {
        // 验证数据
        console.log(this.forgotForm.qa)
        if (this.forgotForm.qa.length == 3) {
          this.$refs.forgotForm.validate((valid) => {
            if (valid) {
              this.nextTag()
            }
          })
        } else {
          this.$message.error("未设置密保问题，无法找回密码，请联系管理员");
        }
      }
    },
    nextTag() {
      if (this.active++ > 2) this.active = 0
    },
    checkUsername() {
      this.$refs.forgotForm.validate((valid) => {
        if (valid) {
          this.getRequest(
            `/portal/user/check/${this.forgotForm.username}`
          ).then((resp) => {
            if (resp) {
              if (resp.status == 21) {
                this.getQuestions()
              } else {
                this.$message.error('用户名不存在')
              }
            }
          })
        }
      })
    },
    getQuestions() {
      this.getRequest(`/portal/user/question/${this.forgotForm.username}`).then(
        (resp) => {
          if (resp) {
            this.forgotForm.qa = resp.data
            this.nextTag()
          }
        }
      )
    },
  },
}
</script>

<style lang="scss" scoped></style>
